<template>
  <div class="market-wrapper" v-if="listData.length > 0">
    <van-cell v-for="item in listData" :key="item.id">
      <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
        <li class="flex items-center left w-200">
          <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
               alt="logo"
               class="w-72 h-72 rounded-full mr-30"/>
          <p class="flex flex-col">
                                <span class="flex flex-col font-32">
                                    <span
                                        class="textColor font-600 font-30">{{ item.symbol && item.symbol.toUpperCase() || '--' }}</span>
                                    <span class="font-24 text-grey" style="position: relative; top: 1px">
                                        {{ item.name && item.name || '--' }}</span>
                                </span>
<!--            <span class="font-24 text-grey">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>-->
          </p>
        </li>

        <li class="flex flex-col items-end w-160 h-70">
          <m-echarts  v-if="!isCopy" :ratio="item.change_ratio" :dataObj="item" class="w-full h-full"/>
          <Copy v-if="isCopy" :dataObj="item" class="w-full h-full"></Copy>
        </li>
        <li class="right flex flex-col items-end w-200 font-400">
          <p class="font-28 text-black">{{ currency.currency_symbol }}{{
              item.close && (item.close *
                  currency.rate).toFixed(2) || '--'
            }}</p>
          <p class="font-28  text-green border-0 text-center"
             v-if="item.change_ratio>0">+{{ item.change_ratio || '--' }}%</p>
          <p class="font-28 text-red border-0 text-center" v-else>
            {{ item.change_ratio || '--' }}%</p>
        </li>
      </ul>
    </van-cell>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {Cell} from 'vant';
import { HOST_URL } from '@/config'

import MEcharts from "@/components/market-list/MEcharts";
import Copy from "@/components/market-list/MEcharts/copy";
export default {
  name: "MarketList",
  props: {
    isCopy: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {
      HOST_URL,
    }
  },
  computed: {
    ...mapGetters({currency: 'home/currency'}),
  },
  methods: {
    onItemClick(item) {
      this.$router.push({
        path: `/trendDetails/${item.symbol}`
      });
    },
  },
  components: {
    [Cell.name]: Cell,
    MEcharts,
    Copy
  },
  updated() {
  }
}
</script>

<style lang="scss" scoped>

</style>
